<template>
	<view>
		<view class="cu-chat">
			<view class="" v-for="(message, index) in MsgList" :key="index">
				<view class="" v-if="message.type === 0">
					<view  class="cu-item self"  >
						<view class="main">
							<view class="content shadow">
								<text>{{ message.content }}</text>
							</view>
						</view>
						<view class="cu-avatar radius" :style="{ 'background-image': 'url(' + message.user.avatar + ')' }">
						</view>
						<view class="date">{{ message.timestamp.slice(11, 16) }}</view>
					</view>
				</view>
				<view class="" v-if="message.type === 1">
					<view  class="cu-item" >
						<view class="cu-avatar radius" :style="{ 'background-image': 'url(' + message.user.avatar + ')' }">
						</view>
						<view class="main">
							<view class="content shadow">
								<text>{{ message.content }}</text>
							</view>
						</view>
						
						<view class="date">{{ message.timestamp.slice(11, 16) }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
			<view class="action">
				<text class="cuIcon-sound text-grey"></text>
			</view>
			<input v-model="sendContent" class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300"
				cursor-spacing="10" @focus="InputFocus" @blur="InputBlur"></input>
			<view class="action">
				<text class="cuIcon-emojifill text-grey"></text>
			</view>
			<button class="cu-btn bg-green shadow" @click="sendMsg">发送</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				MsgList: [],
				sendContent: '',
				ChatID: '',
				InputBottom: 0
			};
		},
		onLoad(query) {
			// let token = JSON.parse(uni.getStorageSync('vuexvuex'))
			// var parsedData = JSON.parse(token.value);
			// var tokenValue = parsedData.userinfo.token; 
			// let domainPrefix = this.$myHttp.config.baseUrl;
			// this.domainPrefix = domainPrefix.replace(/\/$/, '');
			this.ChatID = query.id || '';
			this.getMsgList()


		},
		methods: {
			async getMsgList() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.getMessageList,
					data: {
						id: this.ChatID,
					}
				})
				this.MsgList = res.data.messages
				console.log('this.MsgList: ', this.MsgList)
			},
			async sendMsg() {
				console.log('this.sendContent: ', this.sendContent)
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.sendMessage,
					data: {
						id: this.ChatID,
						content: this.sendContent
					}
				})

				// uni.showToast({
				// 	title: res.msg,
				// 	duration: 1000, // 提示框显示时间，单位为毫秒
				// 	mask: true, // 是否显示透明蒙层，防止触摸穿透
				// });
				if(res.code == 1){
					this.getMsgList()
					this.sendContent = ''
				}

			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			}
		}
	}
</script>

<style>
	page {
		padding-bottom: 100upx;
	}
</style>